<template>
  <div class="user-manage">
    <div class="manage-btns">
      <el-button size="small" type="primary" @click="openDialog('create', null)">新增用户</el-button>
    </div>
    <div class="manage-list">
      <el-table :data="userList.tabData" border>
        <el-table-column prop="UserName" label="账号"></el-table-column>
        <el-table-column label="角色">
          <template #default="scope">
            {{ userTypes[scope.row.Type] }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="200px" label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="delUserFun(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="release-page">
        <el-pagination
          v-model:current-page="userList.page"
          :page-size="userList.size"
          :small="true"
          :background="true"
          layout="total, prev, pager, next"
          :total="userList.total"
          @size-change="getUserlist"
          @current-change="getUserlist"
        />
      </div>
    </div>

    <el-dialog :width="500" :destroy-on-close='true' title="新建用户" v-model="userModel.modelVisible">
      <el-form label-position="left" class="edite-user-form">
        <el-form-item label="账号" label-width="90px">
          <el-input size="small" v-model="userModel.user_name"></el-input>
        </el-form-item>
        <el-form-item label="角色" label-width="90px">
          <el-select size="small" v-model="userModel.type">
            <el-option
              v-for="item in Object.keys(userTypes)"
              :key="item"
              :value="item"
              :label="userTypes[item]">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始密码" label-width="90px">
          <el-input type="password" size="small" v-model="userModel.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="90px">
          <el-input type="password" size="small" v-model="userModel.rePassword"></el-input>
        </el-form-item>
        <el-form-item label-width="90px" class="edit-dialog-btn">
          <el-button size="small" type="primary" @click="summit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import { nanoid } from 'nanoid';
export default defineComponent({
  name: 'userManage',
  setup() {
    const store = useStore();

    const userTypes = {
      admin: "管理员",
      normal: "普通用户"
    }

    const userModel = reactive({
      modelVisible: false,
      type: "",
      user_name: "",
      password: "",
      rePassword: ""
    });
    const userList = reactive({
      tabData: [],
      page: 1,
      size: 10,
      total: 0
    });
    const resetUserInfo = () => {
      Object.keys(userModel).forEach(item => userModel[item] = '');
    };
    const openDialog = (type:string, data:any) => {
      resetUserInfo();
      userModel.modelVisible = true;
    };
    // 删除用户
    const delUserFun = async(user) => {
      await ElMessageBox.confirm('确定要删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await store.dispatch('user/userDetele', { user_name: user.UserName });
      await getUserlist();
    };
    // 获取用户列表
    const getUserlist = async () => {
      const { data_list, total } = await store.dispatch('user/userList', {
        page: userList.page,
        size: userList.size
      });
      userList.tabData = data_list;
      userList.total = total;
    };
    // 提交新增/编辑用户
    const summit = async () => {
      if (!userModel.user_name) {
        ElMessage.warning("请输入账号");
        return;
      }
      if (!userModel.password) {
        ElMessage.warning("请输入密码");
        return;
      }
      if (userModel.password !== userModel.rePassword) {
        ElMessage.warning("两次输入密码不一致");
        return;
      }
      await store.dispatch('user/userReg', {
        user_name: userModel.user_name,
        password: userModel.password,
        type: userModel.type
      });
      userModel.modelVisible = false;
      getUserlist();
    };
    onMounted(() => {
      getUserlist();
    });
    return {
      userList,
      userTypes,
      userModel,
      getUserlist,
      openDialog,
      delUserFun,
      summit,
    };
  },
});
</script>
<style lang="scss" scoped>
.user-manage {
  &::v-deep() {
    .el-button--small {
      min-height: 24px;
      padding: 5px 10px;
    }
  }
  .manage-btns {
    @extend %container;
    &::v-deep(.el-button) {
      background-color: #0054fe;
      border-color: #0054fe;
    }
  }
  .release-page {
    text-align: right;
    margin-top: 10px;
  }
  .manage-list {
    @extend %container;
    margin-top: 10px;
  }

  .edite-user-form {
    .el-form-item {
      margin-bottom: 10px;
    }
    .edit-dialog-btn {
      text-align: right;
    }
  }
  .city-choose-item {
    display: flex;
    margin-bottom: 5px;
    i {
      font-size: 22px;
      margin-left: 5px;
      line-height: 30px;
      cursor: pointer;
    }
    .push-city {
      color: #67C23A;
    }
    .remove-city {
      color: #F56C6C;
    }
  }
}
</style>
